<template>
  <div>
    <el-card class="box-card" shadow="hover">
      <el-button @click="toxl">操作按钮</el-button>
      <div ref="xl_chart" style="height: 320px"></div>
    </el-card>
  </div>
</template>


<script>
import * as echarts from "echarts";
import { xlChartsDaily } from "@/api/xl/xl";

export default {
  name: "xlcharts",
  data() {
    return {
      xlData:{
        userId:1,
        days:3
      },
      name: "",
      xl_chart: null,
      xl_chart_option: {
        grid: {
          left: "0%", // 设置图表距离容器左侧的距离
          top: "30%",
          bottom: "1%",
          containLabel: true, // 保证标签不会被裁剪或溢出
        },
        color: ["#f16331"], // 自定义柱状图和折线图的颜色
        title: {
          text: "马洪哲的心率变化",
        },
        tooltip: {},
        legend: {
          data: ["今天", "近三天", "近七天"],
        },
        xAxis: {
          data: [
            "00:00-02:00",
            "02:00-04:00",
            "04:00-06:00",
            "06:00-08:00",
            "08:00-10:00",
            "10:00-12:00",
            "12:00-14:00",
            "14:00-16:00",
            "16:00-18:00",
            "18:00-20:00",
            "20:00-22:00",
            "22:00-24:00",
          ],
          axisLine: {
            show: true,
            symbol: ["none", "arrow"], // 使用箭头
            symbolSize: [5, 10], // 箭头大小
          },
        },
        yAxis: {
          name: "心率 (bpm)",
          type: "value",
          axisLine: {
            show: true,
            symbol: ["none", "arrow"], // 使用箭头
            symbolSize: [5, 10], // 箭头大小
          },
          axisLabel: {
            formatter: "{value} bpm",
          },
          splitLine: {
            lineStyle: {
              color: "#e7e7e7",
            },
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"],
            },
          },
        },
        series: [
          {
            name: "今天",
            type: "bar",
            data: [35.5, 36, 36, 36, 36.5, 36.2, 36.8, 37, 37.5, 36, 36.5, 45],
            tooltip: {
              valueFormatter: function (value) {
                return value + " bpm";
              },
            },

            itemStyle: {
              // 使用回调函数为不同的数据设置不同的颜色
              color: function (params) {
                // params是一个包含当前数据信息的对象
                var heartRate = params.value; // 获取当前柱状的数据（体温）
                if (heartRate < 80) {
                  return "#e6efd1"; // 低于正常值
                }
                if (heartRate >= 80 && heartRate <= 100) {
                  return "#75ec30"; // 正常心率，显示为浅绿色
                } else {
                  return "#f46d25"; // 高于正常值，显示为黄色
                }
              },
            },
          },
          {
            name: "近三天",
            type: "bar",
            data: [35.5, 36, 36, 36, 36.5, 36.2, 36.8, 37, 37.5, 36, 36.5, 45],
            tooltip: {
              valueFormatter: function (value) {
                return value + " bpm";
              },
            },

            itemStyle: {
              // 使用回调函数为不同的数据设置不同的颜色
              color: function (params) {
                // params是一个包含当前数据信息的对象
                var heartRate = params.value; // 获取当前柱状的数据（体温）
                if (heartRate < 80) {
                  return "#e6efd1"; // 低于正常值
                }
                if (heartRate >= 80 && heartRate <= 100) {
                  return "#75ec30"; // 正常心率，显示为浅绿色
                } else {
                  return "#f46d25"; // 高于正常值，显示为黄色
                }
              },
            },
          },
          {
            name: "近七天",
            type: "bar",
            data: [35.5, 36, 36, 36, 36.5, 36.2, 36.8, 37, 37.5, 36, 36.5, 45],
            tooltip: {
              valueFormatter: function (value) {
                return value + " bpm";
              },
            },

            itemStyle: {
              // 使用回调函数为不同的数据设置不同的颜色
              color: function (params) {
                // params是一个包含当前数据信息的对象
                var heartRate = params.value; // 获取当前柱状的数据（体温）
                if (heartRate < 80) {
                  return "#e6efd1"; // 低于正常值
                }
                if (heartRate >= 80 && heartRate <= 100) {
                  return "#75ec30"; // 正常心率，显示为浅绿色
                } else {
                  return "#f46d25"; // 高于正常值，显示为黄色
                }
              },
            },
          },
        ],
      },
    };
  },
  created() {
    this.get_xl_chart();
  },
  methods: {
    //前往心率数据详情
    toxl(){
      alert(1)
      this.$router.push('/xl/xl/index');
    },
    get_xl_chart() {
      this.$nextTick(() => {
        this.xl_chart = echarts.init(this.$refs.xl_chart, "macarons");
        this.xl_chart.setOption(this.xl_chart_option);
        window.addEventListener("resize", () => {
          this.xl_chart.resize();
        });
      });
    },
    //获取图表信息
    getData(){
      xlChartsDaily(this.xlData).then(res =>{
        console.log(res)
      })
    }
  },
  mounted(){
    this.getData()
  }
};
</script>


<style scoped lang="scss">
</style>
